<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top-header />
      <div class="main-content">
        <div class="column" style="width: 25%">
          <div class="row">
            <dv-border-box-1>
              <age-statistics></age-statistics>
            </dv-border-box-1>
          </div>
          <div class="row">
            <dv-border-box-3>
              <warning-statisics></warning-statisics>
            </dv-border-box-3>
          </div>
        </div>
        <div class="column" style="width: 50%">
          <div class="row">
            <dv-border-box-3>
              <total-people></total-people>
            </dv-border-box-3>
          </div>
          <div class="row">
            <dv-border-box-3>
              <user-number-trend></user-number-trend>
            </dv-border-box-3>
          </div>
        </div>
        <div class="column" style="width: 25%">
          <div class="row">
            <dv-border-box-4 :reverse="true">
              <facility-statistics></facility-statistics>
            </dv-border-box-4>
          </div>
          <div class="row">
            <repair-statistics></repair-statistics>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import TotalPeople from "@/components/dashboardData/totalPeople.vue";
import topHeader from "../components/topHeader.vue";
import UserNumberTrend from "@/components/dashboardData/userNumberTrend.vue";
import FacilityStatistics from "@/components/dashboardData/facilityStatistics.vue";
import RepairStatistics from "@/components/dashboardData/repairStatistics.vue";
import AgeStatistics from "@/components/dashboardData/ageStatistics.vue";
import WarningStatisics from "@/components/dashboardData/warningStatisics.vue";

export default {
  name: "DataView",
  components: {
    topHeader,
    TotalPeople,
    UserNumberTrend,
    FacilityStatistics,
    RepairStatistics,
    AgeStatistics,
    WarningStatisics,
  },
  methods: {},
};
</script>
<style lang="scss">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("../assets/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .main-content {
    width: 100%;
    height: 80%;
    display: flex;
    .row {
      height: 50%;
    }
  }
}
</style>
